<template>
    <div class="page-container">
        <a-form-model :model="form" style="margin: 50px 0 0 50px; width: 50vw;" layout="vertical">
            <a-form-model-item label="已选择的主题" v-if="form.themes.find(v => v.name == form.theme)">
                <div class="themes">
                    <a-card class="theme">
                        <img
                            slot="cover"
                            v-if="form.themes.find(v => v.name == form.theme).image"
                            :alt="form.themes.find(v => v.name == form.theme).name"
                            :src="form.themes.find(v => v.name == form.theme).image"
                        />
                        <a-card-meta>
                            <span slot="title">
                                <span>{{ form.themes.find(v => v.name == form.theme).label }}</span>
                            </span>
                            <span slot="description">
                                <!-- <div>作者：{{ form.themes.find(v => v.id == form.theme).author }}</div> -->
                            </span>
                        </a-card-meta>
                    </a-card>
                </div>
            </a-form-model-item>
            <a-form-model-item v-if="form.themes.find(v => v.name == form.theme)">
                <div slot="label">
                    主题配置
                    <a-tag style="margin-left: 20px;" icon="save-outlined" @click="form.jsonEditMode = 1">json 编辑模式</a-tag>
                    <a-tag icon="save-outlined" @click="form.jsonEditMode = 2">文本编辑模式</a-tag>
                </div>
                <JsonEditor
                    v-show="form.jsonEditMode == 1"
                    :objData="form.jsonData"
                    v-model="form.jsonData"></JsonEditor>
                <a-textarea v-model:value="jsonStrify" v-show="form.jsonEditMode == 2" placeholder="在此输入 json" :rows="4" />
                <a-button icon="save" @click="saveThemeJson">保存</a-button>
            </a-form-model-item>
            <a-form-model-item>
                <div slot="label">
                    <span>全部主题</span>
                </div>
                <div class="themes">
                    <a-card class="theme" hoverable v-for="(v, k) in form.themes" :key="k">
                        <img
                            v-if="v.image"
                            slot="cover"
                            :alt="v.name"
                            :src="v.image"
                        />
                        <template slot="actions" class="ant-card-actions">
                            <a-icon v-if="form.theme == v.name" type="check-circle" style="color: green;"/>
                            <a-icon v-else key="setting" type="setting" @click="saveSetting(v)"/>
                            <a-icon key="download" type="download" v-if="!v.local"/>
<!--                            <a-icon key="delete" type="delete" v-if="v.local"/>-->
                        </template>
                        <a-card-meta>
                            <span slot="title">
                                <span>{{ v.label }}</span>
                            </span>
                            <span slot="description">
                                <!-- <div>作者：{{ v.author }}</div> -->
                            </span>
                        </a-card-meta>
                    </a-card>
                </div>
            </a-form-model-item>
<!--            <a-form-model-item>-->
<!--                <a-button type="primary" size="large" icon="save">保存设置</a-button>-->
<!--            </a-form-model-item>-->
        </a-form-model>
    </div>
</template>
<script>
import { getAllThemesFromMarket, getSetting, setSetting, getThemeJson, saveThemeJson } from '../../../api/setting'
import Vue from 'vue'
import JsonEditor from 'vue-json-edit'

Vue.use(JsonEditor)

export default {
    name: 'ThemeSetting',
    data() {return {
        form: {
            theme: 'default',
            themes: [],
            jsonData: {},
            jsonEditMode: 1
        }
    }},
    created() {
        this.initSetting()
        getAllThemesFromMarket({}).then(res => {
            this.form.themes = res.data.map(v => {
                v.image = v.image
                v.files = v.files
                return v
            })
        }).catch(e => {
            console.error(e);
        })
    },
    methods: {
        saveThemeJson() {
            saveThemeJson({
                theme: this.form.theme,
                json: JSON.stringify(this.form.jsonData)
            }).then(res => {
                this.$message.success('保存成功')
            }).catch(e => {
                console.error(e)
                this.$message.error('网络错误')
            })
        },
        onThemeClick(v) {
            this.form.theme = v.name
        },
        initSetting() {
            getSetting({
                types: 'theme'
            }).then(res => {
                const theme = res.data.find(v => v.type == 'theme') && res.data.find(v => v.type == 'theme').value
                this.form.theme = theme

                this.form.jsonData = {}
                getThemeJson({
                    theme
                }).then(res => {
                    this.form.jsonData = res.data && res.data.value ? JSON.parse(res.data.value) : {}
                })
            }).catch(e => {
                console.error(e)
                this.$message.error(e.msg || '暂未配置')
            })
        },
        saveSetting(v) {
            setSetting({setting: [{
                type: 'theme',
                value: v.name
            }]}).then(res => {
                this.$message.success('保存成功')
                this.initSetting()
            }).catch(e => {
                this.$message.error(e.msg || '')
            })
        },
    },
    computed: {
        jsonStrify: {
            get(e) {
                return JSON.stringify(this.form.jsonData)
            },
            set(e) {
                this.form.jsonData = JSON.parse(e)
            }
        }
    }
}
</script>
<style lang="scss" scoped>
.themes {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    .theme {
        width: 300px;
        margin-right: 20px;
        margin-bottom: 20px;

        img {
            width: 300px;
            height: 300px;
        }
    }
}
.theme-selected {
    min-width: 300px;
}
/deep/ .f-input>* {
    height: 30px;
}
</style>
